<template>
  <a-card hoverable size="small" class="c-workbench-thumbnail__container">
    <template #cover>
      <a-image
        width="100%"
        height="180px"
        :src="props.imageSrc"
        :preview="false"
        @click="goToEditor"
      />
    </template>
    <a-card-meta>
      <template #title>
        <a-flex justify="space-between" align="center">
          <div style="font-size: 1rem" @click="goToEditor">
            {{
              props.boardName.length > 12
                ? `${props.boardName.substring(0, 12)}...`
                : props.boardName
            }}
          </div>
          <a-dropdown :trigger="['click']" placement="bottomRight">
            <a-button type="text" :icon="h(EllipsisOutlined)"></a-button>
            <template #overlay>
              <a-menu>
                <template v-if="props.myRole !== boardRole.Viewer">
                  <template v-if="props.isRecycleBin">
                    <a-menu-item @click="() => emits('recover')">
                      恢复
                    </a-menu-item>
                    <a-menu-item @click="() => emits('cleanOut')">
                      彻底删除
                    </a-menu-item>
                  </template>
                  <template v-else>
                    <a-menu-item @click="() => emits('rename')">
                      重命名
                    </a-menu-item>
                    <a-menu-item @click="() => emits('delete')">
                      删除白板
                    </a-menu-item>
                  </template>
                </template>
                <a-menu-item @click="() => emits('details')">
                  详细信息
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-flex>
      </template>
      <template #description>
        <a-flex justify="space-between" align="center">
          <div style="font-size: 0.8rem; color: #9a9a9a">
            {{ props.updateTime }}
          </div>
          <a-tag
            :bordered="false"
            v-if="props.myRole === boardRole.Viewer"
            color="warning"
          >
            仅浏览
          </a-tag>
        </a-flex>
      </template>
    </a-card-meta>
  </a-card>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { EllipsisOutlined } from '@ant-design/icons-vue';
import { boardRole } from '@/utils/Const.ts';

const props = defineProps({
  imageSrc: {
    type: String,
    required: true,
  },
  boardName: {
    type: String,
    required: true,
  },
  updateTime: {
    type: String,
    required: true,
  },
  myRole: {
    type: Number,
    required: true,
  },
  isRecycleBin: {
    type: Boolean,
    required: true,
  },
});
const emits = defineEmits({
  editBoard: null,
  rename: null,
  details: null,
  delete: null,
  recover: null,
  cleanOut: null,
});

function goToEditor() {
  if (!props.isRecycleBin) {
    emits('editBoard');
  }
}
</script>

<style scoped lang="scss">
:deep(.ant-tag) {
  margin-inline-end: 0;
}
</style>
